<template>
  <div class="home-container">

    <div style="display: flex; margin-top: 20px">
      <div style="width: 90%">
        <el-carousel height="350px" :interval="3000">
          <el-carousel-item v-for="item in lun" :key="item.id">
            <img
                :src="item.img"
                style="
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
              "
            />
          </el-carousel-item>
        </el-carousel>
      </div>

      <el-card style="width: 20%; margin-left: 10px">
        <h2 style="margin: 20px 0">公告列表</h2>
        <div>
          <el-timeline reverse slot="reference">
            <el-timeline-item
                v-for="item in notices"
                :key="item.id"
                :timestamp="item.time"
            >
              <el-popover
                  placement="right"
                  width="200"
                  trigger="hover"
                  :content="item.info"
              >
                <span slot="reference">{{ item.name }}</span>
              </el-popover>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </div>

    <div style="margin: 30px 0">
      <div style="margin: 10px 0">
        <div style="border-bottom: 2px solid #ccc; padding: 10px 0; font-size: 20px; margin-bottom:10px;" >评论({{comments.length}})</div>
        <div class="comment-send-warp">
          <el-input class="comment-send-input" size="small" type="textarea" rows="4" v-model="commentForm.content" placeholder="善语结善缘，恶语伤人心"></el-input>
          <el-button :disabled="!commentForm.content" class="btn-sent-comment" type="primary" size="medium" @click="save" >评论</el-button>
        </div>
      </div>
      <div class="comment-warp">
        <div v-for="item in comments" :key="item.id">
          <div class="comment-item">
            <div class="comment-avatar">
              <el-image :src="item.avatarUrl"></el-image>
            </div> <!--  头像-->
            <div class="comment-info">
              <div class="comment-name">{{ item.nickname }}</div>
              <div class="comment-content">{{ item.content }}</div>

              <div class="comment-other">
                <div class="comment-time">
                  <i class="el-icon-time"></i><span>{{ item.time }}</span>
                </div>
                <div>
                  <el-button type="text" @click="handleReply(item.id)">回复</el-button>
                  <el-button type="text" @click="del(item.id)" v-if="user.id === item.userId || user.role==='ROLE_ADMIN'">删除</el-button>
                </div>
              </div>
            </div>
          </div>
          <!--回复-->
          <template v-if="item.children.length">
            <div v-for="subItem in item.children" class="comment-item comment-item-reply">
              <div class="comment-avatar">
                <el-image :src="subItem.avatarUrl"/>
              </div> <!--  头像-->
              <div class="comment-info">
                <div class="comment-name">{{ subItem.nickname }} 回复 @ {{subItem.pnickname}}</div>
                <div class="comment-content">{{ subItem.content }}</div>

                <div class="comment-other">
                  <div class="comment-time">
                    <i class="el-icon-time"></i><span>{{ subItem.time }}</span>
                  </div>
                  <div>
                    <el-button type="text" @click="handleReply(subItem.id)">回复</el-button>
                    <el-button type="text" @click="del(subItem.id)" v-if="user.id === subItem.userId || user.role==='ROLE_ADMIN'">删除</el-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <el-dialog title="回复" :visible.sync="dialogFormVisible2" width="50%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="回复内容">
          <el-input type="textarea" v-model="commentForm.contentReply" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save"  size="small">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "FrontTalk",
  data() {
    return {
      lun: [],
      notices: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      commentItemId: 0,
      dialogFormVisible2: false,
      comments: [],
      commentForm: {},
    };
  },
  created() {
    this.request.get("/carousel").then((res) => {
      this.lun = res.data;
    });
    this.request.get("/notice").then((res) => {
      this.notices = res.data;
    });
    this.loadComment()
  },
  methods: {
    loadComment() {
      this.request.get("/comment/tree/" + this.commentItemId).then(res => {
        this.comments = res.data
      })
    },
    save() {
      if (!this.user.id) {
        this.$message.warning("请登录后操作")
        return
      }
      this.commentForm.itemId = this.commentItemId
      if (this.commentForm.contentReply) {
        this.commentForm.content = this.commentForm.contentReply
      }
      this.request.post("/comment", this.commentForm).then(res => {
        if (res.code === '200') {
          this.$message.success("评论成功")
          this.commentForm = {}  // 初始化评论对象内容
          this.loadComment()
          this.dialogFormVisible2 = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    del(id) {
      this.request.delete("/comment/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.loadComment()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleReply(pid) {
      this.commentForm = { pid: pid }
      this.dialogFormVisible2 = true
    },
  },
};
</script>

<style lang="scss" scoped>

.home-container {
  width: 1430px;
  margin: 0 auto;
}

.comment-send-warp {
  position: relative;
}
.comment-send-warp .btn-sent-comment {
  position: absolute;
  bottom: 35px;
  right: 30px
}
.comment-send-input{
  padding: 20px 10px;
  font-size: 16px;

}
.el-textarea__inner {
  padding: 15px ;
  font-family: '微软雅黑';
}
.comment-warp {
  padding: 0 10px;
}
.comment-item {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.comment-item-reply {
  margin-left: 22px;
  margin-right: -30px;
  transform: scale(0.9);
  padding-left: 10px;
  border-radius: 4px;
}
.comment-item  .comment-avatar  {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}

.comment-item  .comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-info {
  flex: 1;
}
.comment-info .comment-name {
  color: #8c939d;
  font-size: 14px;
}
.comment-info .comment-content {
  color: #8c939d;
  font-size: 14px;
  margin-top: 4px;
  font-size: 16px;
  color: #666;
  text-align: justify;
}
.comment-info .comment-other {
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  font-size: 14px;
  margin-top: 2px;
  color: #9499A0;
}
.comment-info .comment-other  .comment-time {
  margin-right: 20px;
  min-width: 170px;
}
.comment-info .comment-other  .comment-time i {
  margin-right: 4px;
}
.comment-info .comment-other .el-button {
  color: #9499A0;
}

</style>
